import React from 'react'
import Paper from '@material-ui/core/Paper'
import Fade from '@material-ui/core/Fade';
import Typography from '@material-ui/core/Typography'
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  paper: {
    backgroundColor: theme.palette.primary.light,
    position: "relative",
    overflow: "hidden",
  },
  "@keyframes waveEffect": {
    "0%": {
      transform: "translate3d(-50%, 3%, 0) rotateZ(80deg)"
    },
    "100%": {
      transform: "translate3d(-50%, 3%, 0)  rotateZ(100deg)"
    }
  },
  wave: {
    "&::before": {
      content: '""',
      left: "50%",
      height: "200vw",
      width: "200vw",
      backgroundColor: theme.palette.primary.dark,
      position: "absolute",
      borderRadius: "37%",
      animation: "$waveEffect 5s infinite alternate",
      transform: "translateZ(0)",
      display: "block",
      "z-index": "1",
    },
    "&::after": {
      content: '""',
      left: "50%",
      height: "200vw",
      width: "200vw",
      opacity: "0.5",
      backgroundColor: theme.palette.primary.dark,
      position: "absolute",
      borderRadius: "34%",
      animation: "$waveEffect 4s infinite alternate",
      display: "block",
      "z-index": "1",
    },
  },
  textContainer: {
    "z-index": "100",
    position: "relative",
  },
  title: {
    fontWeight: 500,
    color: theme.palette.grey[200],
    paddingRight: '61.8%',
    paddingTop: theme.spacing(5),
    paddingBottom: theme.spacing(1),
  },
  subtitle: {
    fontWeight: 600,
    color: theme.palette.grey[200],
    paddingRight: '61.8%',
    paddingTop: theme.spacing(2),
    paddingBottom: theme.spacing(5),
  }
}))

export default function WelcomPaper(props) {
  const classes = useStyles();
  return (
    <div>
      <Fade direction="right" in={true} timeout={700}>
        <Paper classes={{ root: classes.paper }} elevation={0} square={true}>
          <div className={classes.wave}></div>
          <div className={classes.textContainer}>
            <Typography className={classes.title} variant="h1" align="right">
              {props.title}
            </Typography>
            <Typography className={classes.subtitle} variant="h6" align="right">
              {props.description}
            </Typography>
          </div>
        </Paper>
      </Fade>
    </div>
  )
}